<template>
	<view>
		<u-search class="search" placeholder="卡布奇诺" v-model="keyword" input-align="center" :show-action="false"></u-search>
		
		<u-row gutter="16">
			<u-col span="9">
				<u-notice-bar :more-icon="true" mode="horizontal" :list="topMsg"></u-notice-bar>
			</u-col>
			<u-col span="3">
				<!-- <u-tag text="一丘之貉" mode="dark" /> -->
				<view style="font-weight: bold;text-align: center;">桌号:{{number}}</view>
			</u-col>
		</u-row>
		
		
		<!-- <easy-scroll></easy-scroll> -->
		<u-row gutter="16" align="top">
			<!-- 菜单 -->
			<u-col span="5">
				<view class="menus" v-for="(item,index) in list">
					<view :class="{'active':index == showNavIndex}" 
						@click="selctMenu(index,item.id)">
						{{item.name}}
					</view>
				</view>
			</u-col>
			<!-- 右侧内容 -->
			<u-col span="7" class="rights">
				<u-row class="lists" gutter="16" align="top" v-for="(item,index) in dataList">
					<u-col span="6">
						<u-image width="100%" height="180rpx" :src="item.logo"></u-image>
					</u-col>
					<u-col span="6">
						<view>{{item.name}}</view>
						<view>{{item.price}}元</view>
						<u-button type="error" size="mini" :ripple="true" shape="circle" @click="selectGoods(item.id)">选规格</u-button>
					</u-col>
				</u-row>
			</u-col>
		</u-row>
		
		
		<!-- 规格选择 -->
		<u-popup v-model="show" mode="bottom" border-radius="14" length="50%" :closeable="true">
			<scroll-view scroll-y="true" style="margin: 4%">
				<view v-for="(items,index) in types">
					<u-tag :text="items.type_name" type="error" shape="circleRight" />
					<view style="margin: 2% 5%" v-for="(val,key) in typesVal">
						<text v-if="val.type_id == items.id" :class="{'active':key == showTypeInde}" @click="SelectType(val,key)">
							{{val.name}}
						</text>
					</view>
				</view>
			</scroll-view>
			<view class="confrim-btn">
				<u-button type="error" @click="addShop()">选好了</u-button>
			</view>
			
		</u-popup>
		
	</view>
	
</template>

<script>

	export default {
		components:{

		},
		data() {
			return {
				keyword:'',
				topMsg: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				showNavIndex:0,
				showTypeInde:0,
				list:[],
				dataList:[],
				show:false,
				number:'',
				types:[],
				typesVal:[],
				typeArr:[],
				typePid:[],
			};
		},
		created(){
			this.reqs(0);
		},
		mounted(){
			this.number = this.$store.state.number; //桌号
			console.log(this.$store.state.number)
		},
		methods:{
			//菜单选择
			selctMenu(index,id){
				this.showNavIndex = index;
				this.reqs(id);
			},
			//点击规格后
			selectGoods(id){
				uni.showLoading({
				    title: '加载规格'
				});
				uni.request({
				    url: getApp().globalData.app_url+"/api/types", //仅为示例，并非真实接口地址。
				    data: {
				        // token: '',
						commodity_id:id
				    },
				    success: (res) => {
						console.log('-------请求商品规格-------');
				        console.log(res.data);
						this.types = res.data.types;
						this.typesVal = res.data.tyepsVal;
						uni.hideLoading();
				    }
				});
				this.show = true;
			},
			//请求数据
			reqs(index){
				uni.showLoading({
				    title: '加载中'
				});
				uni.request({
				    url: getApp().globalData.app_url+"/api/index", //仅为示例，并非真实接口地址。
					// url: "http://localhost:8080/static/api/menu.json", //仅为示例，并非真实接口地址。
				    data: {
				        // token: '',
						menu_id:index
				    },
				    success: (res) => {
						console.log('-------菜单-------');
				        console.log(res);
						this.list = res.data.menu;
						this.dataList = res.data.list;
						uni.hideLoading();
				    }
				});
			},
			//添加购物车
			addShop(){
				this.$emit('func','ok');
				this.show = false;
			},
			SelectType(val,key){
				this.showTypeInde = key;
/* 				console.log(val)
				console.log(val.id)
				console.log(val.type_id)
				// console.log(val.name) */
				uni.request({
				    url: getApp().globalData.app_url+"/api/addType", //仅为示例，并非真实接口地址。
				    data: {
				        // token: '',
						id:val.id,
						type_id:val.type_id
				    },
				    success: (res) => {
						console.log('-------已经选择规格-------');
				        console.log(res);
				    }
				});
			}
		}
	}
</script>

<style lang="scss">
	/* #ifndef MP-WEIXIN */
		.search{
			padding: 10rpx 20rpx;
		}
	/* #endif */
	.menus{
		font-size: 36rpx;
		text-align: center;
		margin: 30rpx 0rpx;
		// border-right: 1rpx solid #dd6161;
		// background-color: #18B566;
	}
	.active{
		font-size: 38rpx;
		font-weight: bold;
		background-color: #dd6161;
		color: #FFFFFF;
		padding: 10rpx;
		opacity: 0.8;
		line-height: 80rpx;
	}
	.rights{
		height: 1000rpx;
		text-align: center;
		background-color: #f3f4f6;
	}
	.lists{
		padding: 20rpx 10rpx;
	}
	.typeList{
		background-color: red;
	}
</style>
